<template>
  <div class="f-echarts" :style="{'height':height + 'px', 'width':width}"></div>
</template>
<script>
  import ECharts from 'echarts'
  import 'echarts/theme/macarons' // theme 主题
  import { EchartFormate } from '@/utils/echarts-formate'
  import FSesize from './f-resize'
  export default {
    name: 'FBar',
    mixins: [FSesize],
    components: {
      ECharts
    },
    data () {
      return {
        width: '100%',
        chart: null
      }
    },
    props: {
      height: {
        type: Number,
        default: 200
      },
      title: {
        type: String,
        default: ''
      },
      yName: {
        type: String,
        default: ''
      },
      subText: {
        type: String,
        default: ''
      },
      chartData: {
        type: Array,
        required: true
      },
      max: {
        type: Boolean,
        default: false
      },
      min: {
        type: Boolean,
        default: false
      },
      average: {
        type: Boolean,
        default: false
      },
      showTitle: {
        type: Boolean,
        default: true
      },
      showLegend: {
        type: Boolean,
        default: true
      },
      stack: {
        type: Boolean,
        default: false
      },
      barGap: {
        type: Boolean,
        default: false
      }

    },
    mounted () {
      this.$nextTick(() => {
        this.initChart()
      })
    },
    beforeDestroy () {
      if (!this.chart) {
        return
      }
      this.chart.dispose()
      this.chart = null
    },
    methods: {
      initChart () {
        this.chart = ECharts.init(this.$el, 'macarons')
        this.setOptions()
      },
      setOptions () {
        this.chart.showLoading()
        const data = EchartFormate.GroupFormate(this.chartData, 'bar')
        this.chart.hideLoading()
        if (this.max || this.min || this.average || this.area || this.stack || this.barGap) {
          for (let i = 0; i < data.series.length; i++) {
            let markLineData = []
            let markPointData = []
            if (this.max) {
              markPointData.push({type: 'max', name: '最大值'})
            }
            if (this.min) {
              markPointData.push({type: 'min', name: '最小值'})
            }
            if (this.average) {
              markLineData.push({type: 'average', name: '平均值'})
            }
            if (this.stack) {
              data.series[i].stack = 'stack'
            }
            if (this.barGap) {
              data.series[i].barGap = 0
            }
            data.series[i].markPoint = {
              data: markPointData
            }
            data.series[i].markLine = {
              data: markLineData
            }
          }
        }
        const option = {
          xAxis: {
            data: data.category,
            axisTick: {
              show: false
            },
            axisLine: {
              show: true,
              symbol: ['none', 'arrow'],
              symbolOffset: 12
            }
          },
          grid: {
            left: 20,
            right: 30,
            bottom: 10,
            containLabel: true
          },
          tooltip: {
            trigger: 'axis',
            axisPointer: {
              type: 'cross'
            },
            padding: [5, 10]
          },
          yAxis: {
            name: this.yName,
            axisTick: {
              show: false
            },
            axisLine: {
              show: true,
              symbol: ['none', 'arrow'],
              symbolOffset: 12
            }
          },
          series: data.series
        }
        if (this.showTitle) {
          option.title = {
            text: this.title,
            subtext: this.subText,
            x: 'center'
          }
          option.grid.top = 80
        }
        if (this.showLegend) {
          option.legend = {
            orient: 'horizontal', // 垂直：vertical； 水平 horizontal
            left: 'center', // 位置默认右
            top: this.showTitle ? 'bottom' : 'top',
            data: data.groups
          }
          if (this.showTitle) {
            option.grid.bottom = 30
          }
        }
        this.chart.setOption(option, true)
      }
    }
  }
</script>
<style scoped>
  .f-echarts{
    background-color: #FFFFFF;
  }
</style>
